<template>
  <div class="live_jinbi_box">
    <i class="jinbi_move move1"></i>
    <i class="jinbi_move move2"></i>
    <i class="jinbi_move move3"></i>
    <i class="jinbi_move move4"></i>
    <!-- <button @click="aniGo" style="margin-top:50px">click</button> -->
  </div>
</template>

<script>
export default {
  name: "jinbi",
  props: ["isRuningAni"],
  data() {
    return {
      parabola: null
    };
  },
  created() {},
  mounted() {
    this.aniGo();
    setInterval(() => {
      this.aniGo();
    }, 10000);
  },
  destroyed() {
    this.parabola = null;
  },
  watch: {
    isRuningAni(a) {}
  },
  methods: {
    aniGo() {
      let ParabolaObj = this.aniObjFn();
      this.parabola = new ParabolaObj({
        origin: ".live_jinbi_box",
        target: ".purse_icon",
        element: ".move1"
      });
      let moveEls = document.querySelectorAll(".jinbi_move");

      for (let i = 0; i < moveEls.length; i++) {
        ((el, i) => {
          setTimeout(() => {
            this.parabola.move(el);
          }, i * 200);
        })(moveEls[i], i);
      }
    },
    aniObjFn() {
      class Parabola {
        constructor(config) {
          this.$ = selector => {
            return document.querySelector(selector);
          };
          this.b = 0;
          this.INTERVAL = 15;
          this.timer = null;
          this.config = config || {};
          // 起点
          this.origin = this.$(this.config.origin) || null;
          // 终点
          this.target = this.$(this.config.target) || null;
          // 运动的元素
          this.element = this.$(this.config.element) || null;
          this.element.style.opacity = 1;
          // 曲线弧度
          // this.radian = this.config.radian || 0.004;
          this.radian = 0.002 || 0.004;
          // 运动时间(ms)
          this.time = this.config.time || 1000;

          // this.originX = this.origin.getBoundingClientRect().left;
          // this.originY = this.origin.getBoundingClientRect().top;
          // this.originX = this.origin.getBoundingClientRect().x;
          // this.originY = this.origin.getBoundingClientRect().y;
          // this.targetX = this.target.getBoundingClientRect().x;
          // this.targetY = this.target.getBoundingClientRect().y;

          this.originX = this.origin.offsetLeft;
          this.originY = this.origin.offsetTop;

          this.targetX = this.target.offsetLeft + 10;
          this.targetY = this.target.offsetTop + 16;

          this.diffx = this.targetX - this.originX;
          this.diffy = this.targetY - this.originY;
          this.speedx = this.diffx / this.time;

          // 已知a, 根据抛物线函数 y = a*x*x + b*x + c 将抛物线起点平移到坐标原点[0, 0]，终点随之平移，那么抛物线经过原点[0, 0] 得出c = 0;
          // 终点平移后得出：y2-y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1)
          // 即 diffy = a*diffx*diffx + b*diffx;
          // 可求出常数b的值
          this.b =
            (this.diffy - this.radian * this.diffx * this.diffx) / this.diffx;

          // this.element.style.left = `${this.originX}px`;
          // this.element.style.top = `${this.originY}px`;
        }

        // 确定动画方式
        moveStyle() {
          let moveStyle = "position",
            testDiv = document.createElement("input");
          if ("placeholder" in testDiv) {
            ["", "ms", "moz", "webkit"].forEach(function(pre) {
              var transform = pre + (pre ? "T" : "t") + "ransform";
              if (transform in testDiv.style) {
                moveStyle = transform;
              }
            });
          }
          return moveStyle;
        }

        move(el) {
          let start = new Date().getTime(),
            moveStyle = this.moveStyle(),
            _this = this;
          // if(el){
          //   this.element = el;
          //   this.element.style.opacity = 1;
          // }
          if (this.timer) return;
          (ele => {
            // ele.style.left = `${this.originX}px`;
            // ele.style.top = `${this.originY}px`;
            ele.style.opacity = 1;
            ele.style[moveStyle] = "translate(0px,0px)";
            let timer = null;
            timer = setInterval(function() {
              if (new Date().getTime() - start > _this.time) {
                // console.log(1);
                // _this.element.style.left = `${_this.targetX}px`;
                // _this.element.style.top = `${_this.targetY}px`;
                // _this.element.styles.opacity = 0;
                ele.style.opacity = 0;
                // console.log();
                typeof _this.config.callback === "function" &&
                  _this.config.callback();
                let box = document.querySelector(".purse_icon");
                box.classList.add("ani");
                setTimeout(() => {
                  box.classList.remove("ani");
                }, 100);
                clearInterval(timer);
                timer = null;
                return;
              }
              let x = _this.speedx * (new Date().getTime() - start);
              let y = _this.radian * x * x + _this.b * x;

              if (window.requestAnimationFrame) {
                window.requestAnimationFrame(() => {
                  ele.style[moveStyle] = "translate(" + x + "px," + y + "px)";
                });
              } else {
                ele.style[moveStyle] = "translate(" + x + "px," + y + "px)";
              }
              // if (moveStyle === "position") {
              //   // console.log(2);
              //   // _this.element.style.left = `${x + _this.originX}px`;
              //   // _this.element.style.top = `${y + _this.originY}px`;
              // } else {
              //   // console.log(3);
              //   if (window.requestAnimationFrame) {
              //     window.requestAnimationFrame(() => {
              //       _this.element.style[moveStyle] =
              //         "translate(" + x + "px," + y + "px)";
              //     });
              //   } else {
              //     _this.element.style[moveStyle] =
              //       "translate(" + x + "px," + y + "px)";
              //   }
              // }
            }, this.INTERVAL);
          })(el);
          return this;
        }
      }
      return Parabola;
    }
  }
};
</script>
<style lang="less" scoped>
.live_jinbi_box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  width: 50px;
  height: 50px;
}
i {
  position: absolute;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(./../assets/meng/jinbi.svg);
  &.jinbi_move {
    width: 25px;
    height: 25px;
    left: 12px !important;
    top: 12px !important;
  }
  &.jinbi {
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    animation: jinbiAni 6000ms linear infinite;
    @keyframes jinbiAni {
      0% {
        transform: rotateY(0deg);
      }
      30% {
        transform: rotateY(360deg);
      }
      100% {
        transform: rotateY(360deg);
      }
    }
  }
}
</style>
